<!--
 * @Description: 个人
 * @Author: Zhanghan
 * @Date: 2024-10-15 13:52:32
 * @LastEditTime: 2025-03-01 19:44:25
 * @LastEditors: Zhanghan
-->
<template>
  <div class="mb-4" v-setColor="'blue'" >个人</div>
  <input v-focus type="text" placeholder="自动聚焦的输入框" />
  <div class="mb-4">
    <ProSelect
      :options="getSelectOption(SEX_VALUE)"
      :multiple="true"
      @update:value="updateSelect"
      :filterable="true"
    />
  </div>
  <div class="mb-4">弹框</div>
  <ElButton type="primary" @click="visible = true">喚起打印推弹框</ElButton>
  <ProModal v-model:visible="visible" title="打印" @ok="handleOk" ref="myModal">
    <div id="myContent" :style="myContent">
      <div class="header">居民个人信息</div>
      <ElDescriptions
        title="无耻之徒"
        direction="vertical"
        :column="4"
        :size="'default'"
        border
        class="table"
      >
        <ElDescriptionsItem label="Username">伊恩加拉格</ElDescriptionsItem>
        <ElDescriptionsItem label="Telephone">18100000000</ElDescriptionsItem>
        <ElDescriptionsItem label="Place" :span="2">南区</ElDescriptionsItem>
        <ElDescriptionsItem label="Remarks">
          <ElTag size="small">School</ElTag>
        </ElDescriptionsItem>
        <ElDescriptionsItem label="Address">
          No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
        </ElDescriptionsItem>
      </ElDescriptions>
    </div>
  </ProModal>
</template>
<script setup lang="ts">
import { ProSelect, ProModal } from "@/components/ProComponents/index";
import { SEX_VALUE } from "@/constant/valueEnum";
import { getSelectOption } from "@/utils/function";
import { ref } from "vue";
import {
  ElButton,
  ElDescriptions,
  ElDescriptionsItem,
  ElTag,
} from "element-plus";
import printHtml from "@/utils/print";

const visible = ref<boolean>(false);
const myModal = ref();

const myContent: any = {
  wordBreak: "break-all",
  padding: "0 30px 50px 30px",
  color: "#000",
  fontFamily: "宋体",
  maxHeight: window.screen.availHeight * 0.6,
  overflowY: "auto",
};

//弹框确认--执行打印
const handleOk = () => {
  myModal.value.setloading(true);
  setTimeout(() => {
    myModal.value.close();
    myModal.value.setloading(false);
    printHtml(window.document.getElementById(`myContent`)?.innerHTML ?? "");
  }, 1000);
};

const updateSelect = (val: any) => {
  console.log(val);
  val.forEach((item: any) => {
    console.log(item);
  });
};
</script>

<style lang="less" scoped>
.header {
  text-align: center;
  font-size: 24px;
  margin-bottom: 20px;
  font-weight: bold;
}

.table {
  margin: 0 auto;
}
</style>
